
$(function () {

  echarts_1();
  echarts_2();
  map();
  echarts_3();
  echarts_4();
  echarts_5();
  echarts_6();
  getRandomNumber()

  // 生成10到110之间的随机数
  function getRandomNumber() {
    // 创建一个包含一个32位无符号整数的数组
    const array = new Uint32Array(1);

    // 使用window.crypto.getRandomValues()填充数组
    window.crypto.getRandomValues(array);

    // 将数组的值映射到0到100之间
    const randomValue = array[0] / (0xFFFFFFFF + 1);
    const randomNumber = Math.floor(randomValue * 101); // 0到100之间的随机整数

    // 将随机整数映射到10到110之间
    return randomNumber + 10;
  }


  function echarts_1() {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('echarts_1'));

    var data = [
      {value: 12,name: '行业一'},
      {value: 13,name: '行业二'},
      {value: 70,name: '行业三'},
      {value: 52,name: '行业四'},
      {value: 35,name: '行业五'}
    ];

    option = {
      backgroundColor: 'rgba(0,0,0,0)',
      tooltip: {
        trigger: 'item',
        formatter: "{b}: <br/>{c} ({d}%)"
      },
      color: ['#af89d6', '#4ac7f5', '#0089ff', '#f36f8a', '#f5c847'],
      legend: { //图例组件，颜色和名字
        x: '70%',
        y: 'center',
        orient: 'vertical',
        itemGap: 12, //图例每项之间的间隔
        itemWidth: 10,
        itemHeight: 10,
        icon: 'rect',
        data: ['行业一', '行业二', '行业三', '行业四', '行业五'],
        textStyle: {
          color: [],
          fontStyle: 'normal',
          fontFamily: '微软雅黑',
          fontSize: 12,
        }
      },
      series: [{
        name: '行业占比',
        type: 'pie',
        clockwise: false, //饼图的扇区是否是顺时针排布
        minAngle: 20, //最小的扇区角度（0 ~ 360）
        center: ['35%', '50%'], //饼图的中心（圆心）坐标
        radius: [50, 75], //饼图的半径
        avoidLabelOverlap: true, ////是否启用防止标签重叠
        itemStyle: { //图形样式
          normal: {
            borderColor: '#1e2239',
            borderWidth: 2,
          },
        },
        label: { //标签的位置
          normal: {
            show: true,
            position: 'inside', //标签的位置
            formatter: "{d}%",
            textStyle: {
              color: '#fff',
            }
          },
          emphasis: {
            show: true,
            textStyle: {
              fontWeight: 'bold'
            }
          }
        },
        data: data
      }, {
        name: '',
        type: 'pie',
        clockwise: false,
        silent: true,
        minAngle: 20, //最小的扇区角度（0 ~ 360）
        center: ['35%', '50%'], //饼图的中心（圆心）坐标
        radius: [0, 40], //饼图的半径
        itemStyle: { //图形样式
          normal: {
            borderColor: '#1e2239',
            borderWidth: 1.5,
            opacity: 0.21,
          }
        },
        label: { //标签的位置
          normal: {
            show: false,
          }
        },
        data: data
      }]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    window.addEventListener("resize",function(){
      myChart.resize();
    });
  }
  function echarts_2() {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('echarts_2'));

    option = {
      backgroundColor: 'rgba(0,0,0,0)',
      tooltip: {
        trigger: 'item',
        formatter: "{b}  <br/>{c}辆"
      },
      legend: {
        x: 'center',
        y: '2%',
        data: ['车型一', '车型二', '车型三', '车型四', '车型五'],
        icon: 'circle',
        textStyle: {
          color: '#fff',
        }
      },
      calculable: true,
      series: [{
        name: '车型',
        type: 'pie',
        //起始角度，支持范围[0, 360]
        startAngle: 0,
        //饼图的半径，数组的第一项是内半径，第二项是外半径
        radius: [41, 110],
        //支持设置成百分比，设置成百分比时第一项是相对于容器宽度，第二项是相对于容器高度
        center: ['50%', '20%'],
        //是否展示成南丁格尔图，通过半径区分数据大小。可选择两种模式：
        // 'radius' 面积展现数据的百分比，半径展现数据的大小。
        //  'area' 所有扇区面积相同，仅通过半径展现数据大小
        roseType: 'area',
        //是否启用防止标签重叠策略，默认开启，圆环图这个例子中需要强制所有标签放在中心位置，可以将该值设为 false。
        avoidLabelOverlap: false,
        label: {
          normal: {
            show: true,
            formatter: '{c}辆'
          },
          emphasis: {
            show: true
          }
        },
        labelLine: {
          normal: {
            show: true,
            length2: 1,
          },
          emphasis: {
            show: true
          }
        },
        data: [{
          value: 600,
          name: '车型一',
          itemStyle: {
            normal: {
              color: '#f845f1'
            }
          }
        },
          {
            value: 1100,
            name: '车型二',
            itemStyle: {
              normal: {
                color: '#ad46f3'
              }
            }
          },
          {
            value: 1200,
            name: '车型三',
            itemStyle: {
              normal: {
                color: '#5045f6'
              }
            }
          },
          {
            value: 1300,
            name: '车型四',
            itemStyle: {
              normal: {
                color: '#4777f5'
              }
            }
          },
          {
            value: 1400,
            name: '车型五',
            itemStyle: {
              normal: {
                color: '#44aff0'
              }
            }
          },

          {
            value: 0,
            name: "",
            label: {
              show: false
            },
            labelLine: {
              show: false
            }
          },
          {
            value: 0,
            name: "",
            label: {
              show: false
            },
            labelLine: {
              show: false
            }
          },
          {
            value: 0,
            name: "",
            label: {
              show: false
            },
            labelLine: {
              show: false
            }
          },
          {
            value: 0,
            name: "",
            label: {
              show: false
            },
            labelLine: {
              show: false
            }
          },
          {
            value: 0,
            name: "",
            label: {
              show: false
            },
            labelLine: {
              show: false
            }
          }
        ]
      }]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    window.addEventListener("resize",function(){
      myChart.resize();
    });
  }
  function map() {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('map'));

    var nameColor = " rgb(55, 75, 113)"
    var name_fontFamily = '宋体'
    var name_fontSize = 35
    var mapName = 'china'
    var data = []
    var geoCoordMap = {};
    var toolTipData = [];


    /*获取地图数据*/
    myChart.showLoading();
    var mapFeatures = echarts.getMap(mapName).geoJson.features;
    myChart.hideLoading();
    mapFeatures.forEach(function(v) {
      // 地区名称
      var name = v.properties.name;
      // 地区经纬度
      geoCoordMap[name] = v.properties.cp;
      data.push({
        name: name,
        value: getRandomNumber()
      })
      toolTipData.push({
        name: name,
        value: [{
          name: "车型一",
          value: getRandomNumber() + '辆'
        },
          {
            name: "车型二",
            value: getRandomNumber()+ '辆'
          },
          {
            name: "车型三",
            value: getRandomNumber()+ '辆'
          },
          {
            name: "车型四",
            value: getRandomNumber()+ '辆'
          }
        ]
      })
    });

    var max = 480,
      min = 9; // todo
    var maxSize4Pin = 50,
      minSize4Pin = 20;

    var convertData = function(data) {
      var res = [];
      for (var i = 0; i < data.length; i++) {
        var geoCoord = geoCoordMap[data[i].name];
        if (geoCoord) {
          res.push({
            name: data[i].name,
            value: geoCoord.concat(data[i].value),
          });
        }
      }
      return res;
    };

    option = {



      tooltip: {
        trigger: 'item',
        formatter: function(params) {
          if (typeof(params.value)[2] == "undefined") {
            var toolTiphtml = ''
            for(var i = 0;i<toolTipData.length;i++){
              if(params.name==toolTipData[i].name){
                toolTiphtml += toolTipData[i].name+':<br>'
                for(var j = 0;j<toolTipData[i].value.length;j++){
                  toolTiphtml+=toolTipData[i].value[j].name+':'+toolTipData[i].value[j].value+"<br>"
                }
              }
            }

            // console.log(convertData(data))
            return toolTiphtml;
          } else {
            var toolTiphtml = ''
            for(var i = 0;i<toolTipData.length;i++){
              if(params.name==toolTipData[i].name){
                toolTiphtml += toolTipData[i].name+':<br>'
                for(var j = 0;j<toolTipData[i].value.length;j++){
                  toolTiphtml+=toolTipData[i].value[j].name+':'+toolTipData[i].value[j].value+"<br>"
                }
              }
            }

            // console.log(convertData(data))
            return toolTiphtml;
          }
        }
      },
      legend: {
        orient: 'vertical',
        y: 'bottom',
        x: 'right',
        data: ['credit_pm2.5'],
        textStyle: {
          color: '#fff'
        }
      },
      visualMap: {
        show: false,
        min: 0,
        max: 600,
        left: 'left',
        top: 'bottom',
        text: ['高', '低'], // 文本，默认为数值文本
        calculable: true,
        seriesIndex: [1],
        inRange: {
          // color: ['#3B5077', '#031525'] // 蓝黑
          // color: ['#ffc0cb', '#800080'] // 红紫
          // color: ['#3C3B3F', '#605C3C'] // 黑绿
          //  color: ['#0f0c29', '#302b63', '#24243e'] // 黑紫黑
          // color: ['#23074d', '#cc5333'] // 紫红
          //   color: ['#00467F', '#A5CC82'] // 蓝绿
          // color: ['#1488CC', '#2B32B2'] // 浅蓝
          // color: ['#00467F', '#A5CC82','#ffc0cb'] // 蓝绿红
          // color: ['#00467F', '#A5CC82'] // 蓝绿
          // color: ['#00467F', '#A5CC82'] // 蓝绿
          // color: ['#00467F', '#A5CC82'] // 蓝绿
          color: ['#22e5e8', '#0035f9','#22e5e8'] // 蓝绿

        }
      },
      /*工具按钮组*/
      toolbox: {
        show: false,
        orient: 'vertical',
        left: 'right',
        top: 'center',
        feature: {

          dataView: {
            readOnly: false
          },
          restore: {},
          saveAsImage: {}
        }
      },
      geo: {
        show: true,
        map: mapName,
        label: {
          normal: {
            show: false
          },
          emphasis: {
            show: false
          }
        },
        roam: true,
        itemStyle: {
          normal: {
            areaColor: '#031525',
            borderColor: '#097bba'
          },
          emphasis: {
            areaColor: '#2B91B7'
          }
        }
      },
      series: [{
        name: '散点',
        type: 'scatter',
        coordinateSystem: 'geo',
        data: convertData(data),
        symbolSize: function(val) {
          return val[2] / 10;
        },
        label: {
          normal: {
            formatter: '{b}',
            position: 'right',
            show: false
          },
          emphasis: {
            show: false
          }
        },
        itemStyle: {
          normal: {
            color: 'rgba(255,255,0,0.8)'
          }
        }
      },
        {
          type: 'map',
          map: mapName,
          geoIndex: 0,
          aspectScale: 0.75, //长宽比
          showLegendSymbol: false, // 存在legend时显示
          label: {
            normal: {
              show: true
            },
            emphasis: {
              show: false,
              textStyle: {
                color: '#fff'
              }
            }
          },
          roam: true,
          itemStyle: {
            normal: {
              areaColor: '#031525',
              borderColor: '#3B5077',
            },
            emphasis: {
              areaColor: '#2B91B7'
            }
          },
          animation: false,
          data: data
        },
        {
          name: '点',
          type: 'scatter',
          coordinateSystem: 'geo',
          symbol: 'pin', //气泡
          symbolSize: function(val) {
            var a = (maxSize4Pin - minSize4Pin) / (max - min);
            var b = minSize4Pin - a * min;
            b = maxSize4Pin - a * max;
            return a * val[2] + b;
          },
          label: {

            normal: {
              show: false,
              formatter:function (params) { return params.data.value[2] },
              textStyle: {
                color: '#fff',
                fontSize: 9,
              }
            }
          },
          itemStyle: {

            normal: {
              color: 'rgba(255,255,0,0)', //标志颜色
            }
          },
          zlevel: 6,
          data: convertData(data),
        },
        {
          name: 'Top 5',
          type: 'effectScatter',
          coordinateSystem: 'geo',
          data: convertData(data.sort(function(a, b) {
            return b.value - a.value;
          }).slice(0, 5)),
          symbolSize: function(val) {
            return val[2] / 10;
          },
          showEffectOn: 'render',
          rippleEffect: {
            brushType: 'stroke'
          },
          hoverAnimation: true,
          label: {
            normal: {
              formatter: '{b}',
              position: 'right',
              show: true
            }
          },
          itemStyle: {
            normal: {
              color: 'rgba(255,255,0,0.8)',
              shadowBlur: 10,
              shadowColor: '#05C3F9'
            }
          },
          zlevel: 1
        },

      ]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    window.addEventListener("resize",function(){
      myChart.resize();
    });
  }
  function echarts_3() {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('echarts_3'));

    option = {

      tooltip : {
        trigger: 'axis'
      },
      legend: {
        orient: 'vertical',
        data:['简易程序案件数']
      },
      grid: {
        left: '3%',
        right: '3%',
        top:'8%',
        bottom: '5%',
        containLabel: true
      },
      color:['#a4d8cc','#25f3e6'],
      toolbox: {
        show : false,
        feature : {
          mark : {show: true},
          dataView : {show: true, readOnly: false},
          magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
          restore : {show: true},
          saveAsImage : {show: true}
        }
      },

      calculable : true,
      xAxis : [
        {
          type : 'category',

          axisTick:{show:false},

          boundaryGap : false,
          axisLabel: {
            textStyle:{
              color: '#ccc',
              fontSize:'12'
            },
            lineStyle:{
              color:'#2c3459',
            },
            interval: {default: 0},
            rotate:50,
            formatter : function(params){
              var newParamsName = "";// 最终拼接成的字符串
              var paramsNameNumber = params.length;// 实际标签的个数
              var provideNumber = 4;// 每行能显示的字的个数
              var rowNumber = Math.ceil(paramsNameNumber / provideNumber);// 换行的话，需要显示几行，向上取整
              /**
               * 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
               */
              // 条件等同于rowNumber>1
              if (paramsNameNumber > provideNumber) {
                /** 循环每一行,p表示行 */
                var tempStr = "";
                tempStr=params.substring(0,4);
                newParamsName = tempStr+"...";// 最终拼成的字符串
              } else {
                // 将旧标签的值赋给新标签
                newParamsName = params;
              }
              //将最终的字符串返回
              return newParamsName
            }

          },
          data: ['0时','1时','2时','3时','4时','5时','6时','7时','8时','9时','10时','11时','12时','13时','14时','15时','16时','17时'
            ,'18时','19时','20时','21时','22时','23时']
        }
      ],
      yAxis : {

        type : 'value',
        axisLabel: {
          textStyle: {
            color: '#ccc',
            fontSize:'12',
          }
        },
        axisLine: {
          lineStyle:{
            color:'rgba(160,160,160,0.3)',
          }
        },
        splitLine: {
          lineStyle:{
            color:'rgba(160,160,160,0.3)',
          }
        },

      }
      ,
      series : [
        {
          // name:'简易程序案件数',
          type:'line',
          areaStyle: {

            normal: {type: 'default',
              color: new echarts.graphic.LinearGradient(0, 0, 0, 0.8, [{
                offset: 0,
                color: '#25f3e6'
              }, {
                offset: 1,
                color: '#0089ff'
              }], false)
            }
          },
          smooth:true,
          itemStyle: {
            normal: {areaStyle: {type: 'default'}}
          },
          data:[710, 312, 321,754, 500, 830, 710, 521, 504, 660, 530, 410,710, 312, 321,754, 500, 830, 710, 521, 504, 660, 530, 410]
        }
      ]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    window.addEventListener("resize",function(){
      myChart.resize();
    });
  }
  function echarts_4() {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('echarts_4'));

    option = {

      tooltip : {
        trigger: 'item',
        formatter: "{b}: <br/>  {c} ({d}%)"
      },

      toolbox: {
        show : false,
        feature : {
          mark : {show: true},
          dataView : {show: true, readOnly: false},
          magicType : {
            show: true,
            type: ['pie', 'funnel']
          },
          restore : {show: true},
          saveAsImage : {show: true}
        }
      },
      calculable : true,
      series : [

        {
          name:'排名',
          type:'pie',
          color: ['#af89d6', '#f5c847', '#ff999a', '#0089ff','#25f3e6'],
          radius : [20, 100],
          center : ['50%', '50%'],
          roseType : 'area',
          data:[
            {value:70, name:'NO.4'},
            {value:90, name:'NO.3'},
            {value:110, name:'NO.2'},
            {value:150, name:'NO.1'},
            {value:40, name:'NO.5'}

          ]
        }
      ]
    };


    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    window.addEventListener("resize",function(){
      myChart.resize();
    });
  }
  function echarts_5() {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('echarts_5'));

    var xData = function() {
      var data = ['NO.1','NO.2','NO.3','NO.4','NO.5'];

      return data;
    }();

    var data = [28, 22, 20, 16, 12]

    option = {
      // backgroundColor: "#141f56",

      tooltip: {
        show: "true",
        trigger: 'item',
        backgroundColor: 'rgba(0,0,0,0.4)', // 背景
        padding: [8, 10], //内边距
        // extraCssText: 'box-shadow: 0 0 3px rgba(255, 255, 255, 0.4);', //添加阴影
        formatter: function(params) {
          if (params.seriesName != "") {
            return params.name + ' ：  ' + params.value + ' 辆';
          }
        },

      },
      grid: {
        borderWidth: 0,
        top: 20,
        bottom: 35,
        left:55,
        right:30,
        textStyle: {
          color: "#fff"
        }
      },
      xAxis: [{
        type: 'category',

        axisTick: {
          show: false
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: '#363e83',
          }
        },
        axisLabel: {
          inside: false,
          textStyle: {
            color: '#bac0c0',
            fontWeight: 'normal',
            fontSize: '12',
          },
          // formatter:function(val){
          //     return val.split("").join("\n")
          // },
        },
        data: xData,
      }, {
        type: 'category',
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          show: false
        },
        splitArea: {
          show: false
        },
        splitLine: {
          show: false
        },
        data: xData,
      }],
      yAxis: {
        type: 'value',
        axisTick: {
          show: false
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: '#32346c',
          }
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: '#32346c ',
          }
        },
        axisLabel: {
          textStyle: {
            color: '#bac0c0',
            fontWeight: 'normal',
            fontSize: '12',
          },
          formatter: '{value}',
        },
      },
      series: [{
        // name: '生师比(%)',
        type: 'bar',
        itemStyle: {
          normal: {
            show: true,
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color: '#00c0e9'
            }, {
              offset: 1,
              color: '#3b73cf'
            }]),
            barBorderRadius: 50,
            borderWidth: 0,
          },
          emphasis: {
            shadowBlur: 15,
            shadowColor: 'rgba(105,123, 214, 0.7)'
          }
        },
        zlevel: 2,
        barWidth: '20%',
        data: data,
      },
        {
          name: '',
          type: 'bar',
          xAxisIndex: 1,
          zlevel: 1,
          itemStyle: {
            normal: {
              color: '#121847',
              borderWidth: 0,
              shadowBlur: {
                shadowColor: 'rgba(255,255,255,0.31)',
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowOffsetY: 2,
              },
            }
          },
          barWidth: '20%',
          data: [30, 30, 30, 30, 30]
        }
      ]
    }


    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    window.addEventListener("resize",function(){
      myChart.resize();
    });
  }
  function echarts_6() {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('echarts_6'));

    var data = {
      "chart": [{
        month: "NO.1",
        value: 600,

      },

        {
          month: "NO.2",
          value: 500,

        },

        {
          month: "NO.3",
          value: 614,

        },

        {
          month: "NO.4",
          value: 442,

        },

        {
          month: "NO.5",
          value: 322

        }

      ]
    }


    var xAxisMonth = [],
      barData = [],
      lineData = [];
    for (var i = 0; i < data.chart.length; i++) {
      xAxisMonth.push(data.chart[i].month);
      barData.push({
        "name": xAxisMonth[i],
        "value": data.chart[i].value
      });
      lineData.push({
        "name": xAxisMonth[i],
        "value": data.chart[i].ratio
      });
    }

    option = {
      // backgroundColor: "#020d22",
      title: '',
      grid: {
        top: '10%',
        left: '18%',
        bottom: '3%',
        right:'5%',
        containLabel: true
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'none'
        },
        formatter: function(params) {
          return params[0]["data"].name + "<br/>" + '报警次数: ' + params[1]["data"].value+'次' ;
        }
      },
      xAxis: [{
        type: 'category',
        show: false,
        data: ['NO.1', 'NO.2', 'NO.3', 'NO.4', 'NO.5'],
        axisLabel: {
          textStyle: {
            color: '#b6b5ab'
          }
        }
      },
        {
          type: 'category',
          position: "bottom",
          data: xAxisMonth,
          boundaryGap: true,
          // offset: 40,
          splitLine: {
            show: false,
            lineStyle: {
              color: "rgba(255,255,255,0.2)"
            }
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: true,
            color: "rgba(255,255,255,0.2)"
          },
          axisLabel: {
            textStyle: {
              color: '#b6b5ab'
            }
          }
        }

      ],
      yAxis: [{
        show: true,
        offset: 52,
        splitLine: {
          show: false,
          lineStyle: {
            color: "rgba(255,255,255,0.2)"
          }
        },
        axisTick: {
          show: false
        },
        axisLine: {
          show: true,
          color: "rgba(255,255,255,0.2)"
        },
        axisLabel: {
          show: true,
          color: '#b6b5ab'
        }
      }, {
        show: false,
        type: "value",
        // name: "合格率(%)",
        nameTextStyle: {
          color: '#ccc'
        },
        axisLabel: {
          color: '#ccc'
        },
        splitLine: {
          show: false
        },
        axisLine: {
          show: true
        },
        axisTick: {
          show: true
        }
      }],
      color: ['#e54035'],
      series: [{
        name: '训练人次',
        type: 'pictorialBar',
        xAxisIndex: 1,
        barCategoryGap: '-80%',
        // barCategoryGap: '-5%',
        symbol: 'path://d="M150 50 L130 130 L170 130  Z"',
        itemStyle: {
          normal: {
            color: function(params) {
              var colorList = [
                'rgba(13,177,205,0.8)', 'rgba(29,103,182,0.6)',
                'rgba(13,177,205,0.8)', 'rgba(29,103,182,0.6)',
                'rgba(13,177,205,0.8)', 'rgba(29,103,182,0.6)'
              ];
              return colorList[params.dataIndex];
            }
          },
          emphasis: {
            opacity: 1
          }
        },
        data: barData,
      },
        {
          symbol: 'image://',
          symbolSize: 42,
          name: "完成率",
          type: "line",
          yAxisIndex: 1,
          data: lineData,
          itemStyle: {
            normal: {
              borderWidth: 5,
              color: {
                colorStops: [{
                  offset: 0,
                  color: '#821eff'
                },

                  {
                    offset: 1,
                    color: '#204fff'
                  }
                ],
              }
            }
          }
        }
      ]
    }


    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    window.addEventListener("resize",function(){
      myChart.resize();
    });
  }






})

